<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../../../bower_components/paper-styles/shadow.html">
<link rel="import" href="../../../bower_components/neon-animation/neon-animatable-behavior.html">
<link rel="import" href="../../../bower_components/neon-animation/animations/fade-in-animation.html">
<link rel="import" href="../../../bower_components/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="../../../bower_components/neon-animation/animations/hero-animation.html">
<link rel="import" href="../../../bower_components/neon-animation/animations/scale-down-animation.html">


<dom-module id="full-log-view">
    <template>
        <style>
            :host {
                @apply(--layout-vertical);
            }
            .main {
                background-color: #B8C4CC;
                @apply(--layout-flex);
                @apply(--layout-scroll);
                @apply(--shadow-elevation-8dp);
            }
            .image-container {
                position: relative;
                width: 100%;
                height: 100%;
            }
            paper-toolbar{
                --paper-toolbar-height : 50px;
               background: transparent;
            }

            .preview {
                position: absolute;
                width: 100%;
                height: 100%;
                color: black;
            }
        </style>
        <paper-toolbar>
            <paper-icon-button id="button" icon="clear" on-click="_onClearButtonClick"></paper-icon-button>
        </paper-toolbar>

        <div id="main" class="main">
            <div class="image-container">
                <div class="preview">
                    <span>{{content}}</span>
                </div>
            </div>
        </div>

    </template>
</dom-module>
<script>
    Polymer({
        is: 'full-log-view',
        behaviors: [
            Polymer.NeonAnimatableBehavior
        ],
        properties: {
            content: {
                type:String
            },
            sharedElements: {
                type: Object,
                value: function() {
                    return {
                        'hero': this.$.main
                    };
                }
            },
            animationConfig: {
                type: Object,
                value: function() {
                    return {
                        'entry': [{
                            name: 'fade-in-animation',
                            node: this.$.button
                        }, {
                            name: 'hero-animation',
                            id: 'hero',
                            toPage: this
                        }],
                        'exit': [{
                            name: 'fade-out-animation',
                            node: this.$.button
                        }, {
                            name: 'scale-down-animation',
                            node: this.$.main,
                            transformOrigin: '50% 50%',
                            axis: 'y'
                        }]
                    }
                }
            }
        },
        _onClearButtonClick: function() {
            this.fire('close');
        }
    });
</script>